<template>
  <div class="main-nav">
    <el-menu
      default-active="/task"
      class="el-menu-vertical-demo"
      background-color="rgba(52, 10, 10, 1)"
      text-color="#fff"
      active-text-color="#5c3f14"
      router>
      <div  class="header-menu">
      个人中心
      </div>
      <el-menu-item index="/1" >
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="/nav2" >
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
      <el-menu-item index="4" >
        <i class="el-icon-document"></i>
        <span slot="title">导航一</span>
      </el-menu-item>
      <el-menu-item index="5" >
        <i class="el-icon-document"></i>
        <span slot="title">导航一</span>
      </el-menu-item>
      <el-menu-item index="gold_log" >
        <i class="el-icon-document"></i>
        <span slot="title">金币商场</span>
      </el-menu-item>
      <el-menu-item index="/level" >
        <i class="el-icon-document"></i>
        <span slot="title">用户等级</span>
      </el-menu-item>
      <el-menu-item index="/uclubcard" >
        <i class="el-icon-document"></i>
        <span slot="title">会员优惠券</span>
      </el-menu-item>
      <el-menu-item index="/binding" >
        <i class="el-icon-document"></i>
        <span slot="title">手机实名</span>
      </el-menu-item>
      <el-menu-item index="/message" >
        <i class="el-icon-document"></i>
        <span slot="title">消息中心</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'mainNav',
  data () {
    return {
      mainNavList: [
        {
          id: 1,
          icon: 'el-icon-document',
          title: '个人首页'
        },
        {
          id: 1,
          icon: 'el-icon-document',
          title: '个人首页'
        },
        {
          id: 1,
          icon: 'el-icon-document',
          title: '个人首页'
        },
        {
          id: 1,
          icon: 'el-icon-document',
          title: '个人首页'
        },
        {
          id: 1,
          icon: 'el-icon-document',
          title: '个人首页'
        },
        {
          id: 1,
          icon: 'el-icon-document',
          title: '个人首页'
        },
        {
          id: 1,
          icon: 'el-icon-document',
          title: '个人首页'
        },
        {
          id: 1,
          icon: 'el-icon-document',
          title: '个人首页'
        }
      ]
    }
  },
  methods: {

  }
}
</script>

<style lang= 'less' scoped>
.el-menu-vertical-demo {
  width: 156px;
}
.header-menu {
   width: 100%;
    height: 80px;
    line-height: 80px;
    background: rgba(52, 10, 10, 1);
    font-size: 20px;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    text-align: center;
}
.el-menu-item {
  height: 45px;
  line-height: 45px;
  text-align: center;
}
.el-menu-item:hover {
  background-color: rgba(52, 10, 10, 1) !important;
  color: rgb(148, 144, 144)!important
}
.el-menu-item.is-active {
    background-color: #deca38 !important
  }
</style>
